<!--
 * @Description: 表单新增和删除组件
-->
<template>
  <div class="_ehl_edit_box">
    <div class="over_all" v-for="(item, index) in value" :key="index">
      <ehl-form
        :ref="index"
        :options="options"
        :data="item"
        :form-index="index"
        :label-width="labelWidth"
        :disabled="disabled"
        :inline-message="inlineMessage"
        custom-class="custom-class"
        class="singleForm"
      >
      </ehl-form>
      <slot name="singleBtn" :index="index">
        <div class="singleBtn" v-if="showEditBtn">
          <span
            class="optBtn el-icon-circle-plus"
            @click="add(index)"
            title="新增"
          ></span>
          <span
            v-if="value.length > 1"
            class="optBtn el-icon-remove"
            @click="del(index)"
            title="删除"
          ></span>
        </div>
      </slot>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import { Icon } from 'element-ui'
  import ehlForm from '@/common'
  Vue.use(Icon)
  export default {
    name: 'ehlEditBox',
    components: {
      ehlForm,
    },
    props: {
      value: { type: Array, default: () => [] },
      options: { type: Object, default: () => {} },
      defaultValue: { type: Object, default: () => {} },
      showEditBtn: { type: Boolean, default: () => true },
      labelWidth: { type: Number, default: () => 100 },
      //是否整体禁用所有元素
      disabled: { type: Boolean, default: () => false },
      //错误显示在行的结尾而不是下部
      inlineMessage: { type: Boolean, default: () => false },
    },
    methods: {
      add(index) {
        this.value.splice(index + 1, 0, JSON.parse(JSON.stringify(this.defaultValue)))
        this.$emit('input', this.value)
        this.$emit('add', this.value)
      },
      del(index) {
        let obj = JSON.parse(JSON.stringify(this.value[index]))
        this.value.splice(index, 1)
        this.$emit('input', this.value)
        this.$emit('del', this.value, obj)
      },
    },
  }
</script>
